<template>
    <div class="flex-table">
      <div class="flex-row">
        <div class="flex-cell flex1">品牌</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">系列</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">型号</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">传播名</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">匹配系统</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">操作系统</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">表体材质</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">表体尺寸(长x宽x高)</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">重量(克：g)</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">表带适配周长</div>
        <div class="flex-cell flex2">140-210mm</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">表带宽度</div>
        <div class="flex-cell flex2">22mm</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">屏幕</div>
        <div class="flex-cell flex2">1.5英寸AMOLED彩色屏幕</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">屏幕分辨率</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">嘻嘻嘻</div>
        <div class="flex-cell flex2">466*466像素，PPI 310</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">按钮</div>
        <div class="flex-cell flex2">上键+下键，其中上键支持旋转表冠功能</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">WLAN</div>
        <div class="flex-cell flex2">支持，仅支持2.4G</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">卫星定位</div>
        <div class="flex-cell flex2">支持，L1：GPS + GLONASS + GALILEO + 北斗 + QZSS，L5：GPS + GLONASS + 北斗 + QZSS</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">NFC</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">蓝牙</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">eSIM独立通话</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">网络频率</div>
        <div class="flex-cell flex2">B1/B2/B3/B4/B5/B7/B8/B9/B18/B19/ B20/B26/B28/B34/B38/B39/B40/B41/B66</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">蓝牙通话</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">双向北斗卫星消息</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">传感器</div>
        <div class="flex-cell flex2">加速度传感器 陀螺仪传感器 地磁传感器 光学心率传感器 环境光传感器 气压传感器 体温传感器 心电传感器 深度计传感器</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">电池容量</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">充电接口</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">麦克风</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">扬声器</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">防水防尘等级</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">理论工作时间</div>
        <div class="flex-cell flex2">全能模式常规使用 4.5 天；超长续航模式最长使用 21 天
          数据来源于华为实验室，实际使用中可能因产品个体差异、使用习惯和环境因素不同而有所不同，请以实际使用情况为准。 全能模式常规使用场景：出厂默认配置、每天连接 LTE 网络 2 小时、蓝牙连接手机 22 小时、心率常开、夜间使用科学睡眠、ECG 测量 2 次/天、使用 app 60 分钟/周、蓝牙通话 30 分钟/周、蓝牙音乐 30 分钟/周、每周平均锻炼 90 分钟（GPS 开启）、开启消息通知（每天 50 次消息、6 次来电、3 次闹钟）、每天亮屏 200 次。 全能模式开启 AOD，HUAWEI WATCH 4 Pro 最长使用 3 天，HUAWEI WATCH 4 最长使用 2 天。 全能模式 eSIM 常开使用，HUAWEI WATCH 4 Pro 全能模式常规使用 2 天，HUAWEI WATCH 4 全能模式常规使用 1.5 天。 全能模式配套 iOS 手机，HUAWEI WATCH 4 Pro 全能模式常规使用 2 天，HUAWEI WATCH 4 全能模式常规使用 1.5 天；开启 AOD，HUAWEI WATCH 4 Pro 最长使用 1.5 天，HUAWEI WATCH 4 最长使用 1 天。 全能模式开启 AOD 使用场景：出厂默认配置、开启熄屏显示、每天连接 LTE 网络 2 小时、蓝牙连接手机 22 小时、心率常开、夜间使用科学睡眠、ECG 测量 2 次/天、使用 app 60 分钟/周、蓝牙通话 30 分钟/周、蓝牙音乐 30 分钟/周、每周平均锻炼 90 分钟（GPS 开启）、开启消息通知（每天 50 次消息、6 次来电、3 次闹钟）、每天亮屏 200 次。 全能模式 eSIM 常开使用场景：出厂默认配置、每天连接 LTE 网络 24 小时、心率常开、夜间使用科学睡眠、ECG 测量 2 次/天、使用 app 60 分钟/周、蓝牙通话 30 分钟/周、蓝牙音乐 30 分钟/周、每周平均锻炼 90 分钟（GPS 开启）、开启消息通知（每天 50 次消息、6 次来电、3 次闹钟）、每天亮屏 200 次。</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">理论充电时间</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">软件名称</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">第三方APP</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
      <div class="flex-row">
        <div class="flex-cell flex1">软件升级</div>
        <div class="flex-cell flex2">{{ people.email }}</div>
      </div>
    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';
const props = defineProps({
  shopId: Number, String
});
console.log(props);

//这里请求后端返回的数据渲染
const people = ref({
  id: 1,
  name: "zhangsan",
  email: "wangjianwhy@sina.com"
});
</script>

<style scoped>
.flex-table {
  width: 95%;
  display: flex;
  flex-direction: column;
  margin: auto;
  font-size: 14px;
}
.flex-row {
  display: flex;
}
.flex-cell {
  border: 1px solid #f2f2f2;
  padding: 6px;
  word-wrap: break-word; /* 允许单词在到达边界时断开 */
  overflow-wrap: break-word; /* 类似于word-wrap，更现代的属性 */
  white-space: normal; /* 默认值，自动换行 */
  word-break: break-all; /* 允许单词在任意位置断开 */
  text-align: left;
}
.flex1 {
  width: 20%;
}
.flex2 {
  width: 80%;
  color: #333333;
}
</style>